<template>
    <el-container>
        <el-header>
            <div class="logo">
                <i class="el-icon-cloudy-and-sunny common" style="color: #007aff; font-size: 25px;"></i>
                <span class="common" style="font-size: 20px; margin: 0 5px;">Color</span>
                <span class="common" style="font-weight: 200; font-size: 20px;">Admin</span>
            </div>
            <div class="tools">
                <el-dropdown>
                    <span class="userinfo">
                        Adam Schwartz
                        <i class="el-icon-arrow-down"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>邮件</el-dropdown-item>
                        <el-dropdown-item>注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <div class="img-box">
                    <img src="http://www.coloradmin.cn/html/colorapple/assets/img/user-13.jpg">
                </div>
                <div class="msg-box">
                    <el-badge :value="5" type="primary">
                        <i class="el-icon-message-solid"></i>
                    </el-badge>
                </div>
                <div class="input-container">
                    <el-input placeholder="Enter Keyword" v-model="keywords"
                              suffix-icon="el-icon-search"></el-input>
                </div>
            </div>
        </el-header>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                keywords: ''
            }
        }
    }
</script>

<style lang="scss" scoped>
    .el-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
    .logo {
        height: 60px;
        line-height: 60px;
        width: 180px;
        float: left;
    }
    .common {
        vertical-align: middle;
    }
    .tools {
        float: right;
        height: 60px;
        width: 600px;
    }
    .input-container {
        /*display: inline-block;*/
        height: 32px;
        line-height: 32px;
        width: 300px;
        padding: 14px 0;
        float: right;
    }
    .el-input {
        font-size: 14px;
        width: 300px;
    }
    .msg-box {
        /*display: inline-block;*/
        height: 32px;
        line-height: 32px;
        font-size: 20px;
        padding: 14px 0;
        margin: 0 20px;
        float: right;
    }
    .msg-box:hover {
        cursor: pointer;
        color: #007aff;
    }
    .img-box {
        height: 32px;
        /*display: inline-block;*/
        padding: 14px 0;
        float: right;
    }
    .img-box > img {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        margin-right: 10px;
    }
    .el-dropdown {
        float: right;
        height: 32px;
        padding: 14px 0;
        line-height: 32px;
    }
    .userinfo {
        font-size: 12px;
    }
    .userinfo:hover {
        color: #007aff;
        cursor: pointer;
    }
</style>
